import { FC, useState } from 'react';
import ReactMarkdown from 'react-markdown' // 阅读器
import MdEditor from 'react-markdown-editor-lite'; // 编辑器
import 'react-markdown-editor-lite/lib/index.css'; // 编辑器样式
interface MdProps {}

const Md: FC<MdProps> = () => {
  const [content, setContent] = useState('')
  return (
    <>
      <MdEditor 
        style={{ height: '500px' }} 
        renderHTML={text => <ReactMarkdown>{text}</ReactMarkdown>} 
        onChange={({ html, text }) => {
          setContent(html)
        }} 
      />
      {/* react 如何展示类似于vue中 v-html的功能 */}
      <div dangerouslySetInnerHTML={{ __html: content }}></div>
    </>
  );
}

export default Md;